<script setup name="Config">
import getSearchConfig from './config/searchConfig'
import getContentConfig from './config/contentConfig.js'
import getDialogConfig from './config/dialogConfig.js'
import useDialog from '@/hooks/useDialog'
import getComputedConfig from '@/hooks/getPageConfig'
import {systemBaseUrl} from '@/api/config/base.js'

const {proxy} = getCurrentInstance()
const {sys_yes_no} = proxy.useDict('sys_yes_no')
const pageName = 'config'
const requestBaseUrl = systemBaseUrl
const pageSearchRef = ref(null)
const pageContentRef = ref(null)
const descConfig = ref({})
const dialogHideItems = ref([])
const tableHideItems = ref([])
const dictMap = {
  configType: sys_yes_no,
}
const searchConfig = getSearchConfig()
const searchConfigComputed = computed(() => {
  return getComputedConfig(searchConfig, dictMap)
})
const tableSelected = ref([])
const tableListener = {
  selectionChange: (selected) => {
    tableSelected.value = selected
  },
}
const contentConfig = getContentConfig()
const contentConfigComputed = computed(() => {
  contentConfig.hideItems = tableHideItems
  return contentConfig
})

const dialogConfig = getDialogConfig()

const dialogConfigComputed = computed(() => {
  dialogConfig.hideItems = dialogHideItems
  return getComputedConfig(dialogConfig, dictMap)
})

const addCallBack = () => {
  dialogHideItems.value.length = 0
}
const editCallBack = (item, type, res) => {
  isEditMore.value = type
}
const isEditMore = ref(false)
const editMoreClick = () => {
  if (tableSelected.value.length > 0) {
    const data = tableSelected.value[0]
    pageContentRef.value?.editClick(data, true)
    nextTick(() => {
      const newArray = tableSelected.value.slice(1)
      dialogRef.value?.changeSelected(newArray)
    })
  }
}

const editNext = (data) => {
  pageContentRef.value?.editClick(data, true)
}

const [dialogRef, infoInit, addClick, editBtnClick] = useDialog(
    addCallBack,
    editCallBack,
    '添加'
)

const dialogWidth = ref('600px')
const searchData = computed(() => {
  return pageContentRef.value?.finalSearchData
})

const search = () => {
  pageSearchRef.value?.search()
}

const beforeSend = (queryInfo) => {
}

const permission = ref({
  add: 'system:config:add',
  edit: 'system:config:edit',
  del: 'system:config:remove',
})

const onChangeShowColumn = (filterArr) => {
  tableHideItems.value = filterArr
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy.download(
      'system/config/export',
      {
        ...searchData.value,
      },
      `config_${new Date().getTime()}.xlsx`
  )
}

const init = () => {
}

init()
</script>
<template>
  <div class="default-main page">
    <PageSearch
        ref="pageSearchRef"
        :pageName="pageName"
        :searchConfig="searchConfigComputed"
    ></PageSearch>
    <PageContent
        ref="pageContentRef"
        :pageName="pageName"
        :contentConfig="contentConfigComputed"
        :descConfig="descConfig"
        :dictMap="dictMap"
        :tableListener="tableListener"
        :tableSelected="tableSelected"
        :permission="permission"
        :requestBaseUrl="requestBaseUrl"
        @beforeSend="beforeSend"
        @addClick="addClick"
        @editBtnClick="editBtnClick"
        @onChangeShowColumn="onChangeShowColumn"
        @editMoreClick="editMoreClick"
    >
      <template #handleLeft>
        <el-button
            class="order17 ml12"
            type="warning"
            v-hasPermi="['system:config:export']"
            @click="handleExport"
        >
          <SvgIcon size="14" iconClass="download"/>
          <span class="ml6">导出</span>
        </el-button>
      </template>
      <template #configTypeSlot="{ backData }">
        <dict-tag :options="sys_yes_no" :value="backData.configType"/>
      </template>
    </PageContent>
    <PageDialog
        ref="dialogRef"
        :width="dialogWidth"
        :pageName="pageName"
        :dialogConfig="dialogConfigComputed"
        :infoInit="infoInit"
        :search="search"
        :isEditMore="isEditMore"
        :requestBaseUrl="requestBaseUrl"
        @editNext="editNext"
    >
    </PageDialog>
  </div>
</template>

<style scoped lang="scss">
.page {
  :deep(.statusClass .el-radio-group) {
    width: 100%;

    .el-radio {
      margin-right: 16px;
    }
  }

  :deep(.del) {
    margin-left: 12px;
  }
}
</style>
